<template>
  <view class="container">
    <!-- 顶部导航栏 -->
    <view class="navbar">
      <view class="navbar-left">
        <!-- 可按需添加左侧内容 -->
      </view>
      <view class="navbar-right">
        <text class="today-btn" @click="goToToday">今天</text>
      </view>
    </view>
    
    <!-- 本周日期导航 + 固定右侧日历图标 -->
    <view class="date-tabs-container">
      <!-- tabs 容器 -->
      <view class="tabs-wrapper">
        <tn-tabs 
          :list="dateList" 
          :isScroll="true" 
          :current="currentDateIndex" 
          name="tab-name" 
          @change="onDateChange"
        ></tn-tabs>
      </view>
      
      <!-- 固定在右侧的日历图标 -->
      <view class="fixed-calendar-icon" @click="showCalendar = true">
        <svg viewBox="2 -2 24 24" width="28" height="28">
          <path d="M19 3h-1V1h-2v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V9h14v10zm0-12H5V5h14v2z" fill="#007AFF"/>
        </svg>
      </view>
    </view>
    
    <!-- 日历组件 -->
    <tn-calendar v-model="showCalendar" mode="date" @confirm="onCalendarConfirm"></tn-calendar>
    
    <!-- 占位内容 -->
    <view class="placeholder-content">
      <text>请选择日期查看场地</text>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 当前选中的日期索引
      currentDateIndex: 0,
      // 本周日期数据
      dateList: [],
      // 控制日历显示/隐藏
      showCalendar: false,
      // 当前选中的日期
      selectedDate: ''
    }
  },
  
  computed: {
    // 当前选中的日期信息
    selectedDateInfo() {
      return this.dateList[this.currentDateIndex] || {};
    }
  },
  
  methods: {
    // 日期切换事件
    onDateChange(index) {
      this.currentDateIndex = index;
      const selectedDate = this.dateList[index];
      this.selectedDate = `${selectedDate.date} (${selectedDate['tab-name']})`;
      console.log(`选中日期: ${this.selectedDate}`);
      // 这里可以添加加载对应日期场地数据的逻辑
    },
    
    // 日历确认选择事件
    onCalendarConfirm(date) {
      this.showCalendar = false;
      
      // 更新选中的日期显示
      const dateObj = new Date(date);
      const weekDays = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
      const month = dateObj.getMonth() + 1;
      const day = dateObj.getDate();
      
      this.selectedDate = `${month}月${day}日 (${weekDays[dateObj.getDay()]})`;
      
      // 找到对应日期在dateList中的索引并选中
      for (let i = 0; i < this.dateList.length; i++) {
        const listDate = new Date();
        listDate.setDate(listDate.getDate() + i - listDate.getDay() + (listDate.getDay() === 0 ? -6 : 1));
        
        if (dateObj.getDate() === listDate.getDate() && 
            dateObj.getMonth() === listDate.getMonth() && 
            dateObj.getFullYear() === listDate.getFullYear()) {
          this.currentDateIndex = i;
          break;
        }
      }
      
      console.log(`从日历选择的日期: ${date}`);
      // 这里可以添加加载对应日期场地数据的逻辑
    },
    
    // 生成本周日期数据
    generateDateList() {
      const dateList = [];
      const weekDays = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
      
      // 获取今天的日期
      const today = new Date();
      
      // 生成本周一到周日的日期
      for (let i = 0; i < 7; i++) {
        const date = new Date(today);
        date.setDate(today.getDate() + i - today.getDay() + (today.getDay() === 0 ? -6 : 1));
        
        const month = date.getMonth() + 1;
        const day = date.getDate();
        
        // 判断是否是今天
        const isToday = date.getDate() === today.getDate() && 
                        date.getMonth() === today.getMonth() && 
                        date.getFullYear() === today.getFullYear();
        
        // 格式化日期为 MM月DD日 格式
        const formattedDate = `${month}月${day}日`;
        
        dateList.push({
          'tab-name': weekDays[date.getDay()],
          date: formattedDate,
          // 如果是今天，添加count标识
          count: isToday ? '今天' : undefined
        });
      }
      
      this.dateList = dateList;
      // 默认选中今天
      this.currentDateIndex = today.getDay() === 0 ? 6 : today.getDay() - 1;
      this.selectedDate = `${dateList[this.currentDateIndex].date} (${dateList[this.currentDateIndex]['tab-name']})`;
    },
    
    // 跳转到今天
    goToToday() {
      const today = new Date();
      this.currentDateIndex = today.getDay() === 0 ? 6 : today.getDay() - 1;
      this.selectedDate = `${this.dateList[this.currentDateIndex].date} (${this.dateList[this.currentDateIndex]['tab-name']})`;
    }
  },
  
  onLoad() {
    // 页面加载时生成本周日期数据
    this.generateDateList();
  }
}
</script>

<style>
.container {
  background-color: #f8f8f8;
  min-height: 100vh;
}

/* 导航栏样式 */
.navbar {
  height: 44px;
  background-color: #007AFF;
  display: flex;
  align-items: center;
  padding: 0 15px;
  position: relative;
}

.navbar-left {
  font-size: 20px;
  
  display: flex;
  align-items: center;
  color: #111111;
}

.navbar-right {
  margin-left: auto;
}

.today-btn {
  color: #fff;
  font-size: 14px;
  padding: 5px 10px;
  border-radius: 4px;
  background-color: rgba(255,255,255,0.2);
}

/* 日期导航容器 */
.date-tabs-container {
  position: relative;
  background-color: #fff;
  border-bottom: 1px solid #eee;
  height: 44px;
  width: 100%;
  overflow: hidden;
}

/* tabs 容器 */
.tabs-wrapper {
  height: 100%;
  padding-right: 45px; /* 为右侧图标留出空间 */
  box-sizing: border-box;
}

/* 固定右侧的日历图标 */
.fixed-calendar-icon {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 99;
  cursor: pointer;
  background-color: #fff;
  padding-left: 5px;
}

/* 占位内容样式 */
.placeholder-content {
  display: flex;
  align-items: center;
  justify-content: center;
  height: calc(100vh - 182px);
  color: #999;
  font-size: 16px;
}
</style>